
import styles from '../css分支/Shop.module.css'
import { Arrow, ArrowLeft } from '@react-vant/icons';
import { useNavigate } from 'react-router-dom';
import { Tabs, Search } from 'react-vant'
import axios from 'axios';
import React, { useEffect, useRef, useState } from 'react'
import { SideBar } from 'antd-mobile'
import { useThrottleFn } from 'ahooks'
import { Card, Price, Tag } from '@nutui/nutui-react'
import { Checklist } from '@nutui/icons-react'
import { Cell, Checkbox } from '@nutui/nutui-react'
export default function Shop() {
    const navigate = useNavigate()
    const items = ['在售中', '已下架']
    const [value, setValue] = useState('');
    const [list, setlist] = useState([])
    const [type, settype] = useState([])
    const getType = async () => {
        let res = await axios.get('http://localhost:3000/xzx/type')
        settype(res.data.data)
    }
    const getList = async () => {
        let res = await axios.get('http://localhost:3000/xzx/shop')
        setlist(res.data.data)
    }
    useEffect(() => {
        getList(),
            getType()
    }, [])
    const [activeKey, setActiveKey] = useState('67b4647d7c5e12eec6c0f13f')
    const [checked] = useState(false)
    const { run: handleScroll } = useThrottleFn(
        () => {
            let currentKey = type[0]._id
            for (const item of type) {
                const element = document.getElementById(`anchor-${item._id}`)
                if (!element) continue
                const rect = element.getBoundingClientRect()
                if (rect.top <= 0) {
                    currentKey = item._id
                } else {
                    break
                }
            }
            setActiveKey(currentKey)
        },
        {
            leading: true,
            trailing: true,
            wait: 100,
        }
    )

    const mainElementRef = useRef(null)

    useEffect(() => {
        const mainElement = mainElementRef.current
        if (!mainElement) return
        mainElement.addEventListener('scroll', handleScroll)
        return () => {
            mainElement.removeEventListener('scroll', handleScroll)
        }
    }, [])
    const handQuan = () => {

    }
    const setControlled=async(val,item)=>{
        let res = await axios.post('http://localhost:3000/xzx/update',{item,val})
        if(res.data.code==200){
            getList()
        }
    }
    return (
        <div>
            <div className={styles.head}>
                <ArrowLeft style={{ marginLeft: '0.1rem' }} onClick={() => { navigate('/shou/main') }} />
                <p style={{ fontSize: '0.22rem' }}>批量下架</p>
                <p style={{ marginRight: '0.1rem' }} onClick={() => { navigate('/shop') }}>确定</p>
            </div>
            <div className={styles.container}>
                <div className={styles.side}>
                    <SideBar
                        activeKey={activeKey}
                        onChange={key => {
                            document.getElementById(`anchor-${key}`)?.scrollIntoView()
                        }}
                    >
                        {type.map(item => (
                            <SideBar.Item key={item._id} title={item.name} />
                        ))}
                    </SideBar>
                </div>
                <div className={styles.main} ref={mainElementRef}>
                    {type.map(items => (
                        <div key={items._id} >
                            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                                <h2 id={`anchor-${items._id}`}>{items.name}(6)</h2>
                                <p onClick={() => handQuan()}>全选</p>
                            </div>

                            {
                                list.map((item, index) => {
                                    return (
                                        items._id == item.tid &&<Card
                                            style={{ margin: '0.3rem 0rem' }}
                                            src={item.img}
                                            title={item.name}
                                            price={item.price}
                                            description={
                                                <>
                                                    <div style={{ position: 'relative' }}>
                                                        <p>库存{item.count}</p>
                                                        <p style={{ fontSize: '0.15rem' }}>月售6</p>
                                                        <Checkbox className="test" label="" checked={!item.issale}
                                                            onChange={(val) => setControlled(val,item)} style={{ position: 'absolute', right: '0.1rem', bottom: '0.1rem' }} />
                                                    </div>
                                                </>
                                            }
                                        />
                                    )
                                })
                            }
                        </div>
                    ))}
                </div>
            </div>
        </div>
    )
}
